<template>
  <div class="common-page-container">
    <a-card :bordered="false" class="common-content-card">
      <!-- 搜索表单 -->
      <SearchForm
        :query-params="queryParams"
        :date-range="dateRange"
        @search="handleSearch"
        @reset="resetQuery"
        class="common-search-form"
      />
      
      <!-- 操作按钮 -->
      <TableOperations
        :selected-count="selectedRowKeys.length"
        @add="handleAdd"
        @batch-read="handleBatchRead"
        @mark-all-read="handleMarkAllRead"
        @clear-read="handleClearRead"
        @batch-delete="handleBatchDelete"
        @refresh="fetchNotificationList"
        class="common-table-operations"
      />
      
      <!-- 数据表格 -->
      <NotificationTable
        :loading="loading"
        :columns="useTableColumns().value"
        :data-list="notificationList"
        :pagination="pagination"
        :selected-row-keys="selectedRowKeys"
        @table-change="handleTableChange"
        @selection-change="onSelectChange"
        @view="handleView"
        @mark-read="handleMarkRead"
        @delete="handleDelete"
        class="common-table"
      />
      
      <!-- 加载出错或无数据时显示重试按钮 -->
      <Empty
        :loading="loading"
        :load-error="loadError"
        :error-message="errorMessage"
        :data-list="notificationList"
        @retry="fetchNotificationList"
      />
    </a-card>

    <!-- 通知详情弹窗 -->
    <NotificationDetailModal
      v-model:open="detailVisible"
      :notification="currentNotification"
    />

    <!-- 发送通知弹窗 -->
    <NotificationFormModal
      v-model:open="formVisible"
      :form="form"
      :loading="submitLoading"
      :formRef="formRef"
      @submit="handleSubmit"
    />
  </div>
</template>

<script setup lang="ts">

// 组件导入
import SearchForm from './components/SearchForm.vue'
import TableOperations from './components/TableOperations.vue'
import NotificationTable from './components/NotificationTable.vue'
import NotificationDetailModal from './components/NotificationDetailModal.vue'
import NotificationFormModal from './components/NotificationFormModal.vue'

// 配置导入
import { useTableColumns } from './config/tableColumns'

// 钩子导入
import useNotificationManagement from './hooks/useNotificationManagement'

// 组件名称
defineOptions({
  name: 'NotificationManagement'
})

// 使用通知管理钩子
const {
  // 状态
  loading,
  submitLoading,
  notificationList,
  selectedRowKeys,
  pagination,
  queryParams,
  dateRange,
  detailVisible,
  formVisible,
  form,
  currentNotification,
  loadError,
  errorMessage,
  formRef,
  
  // 方法
  onSelectChange,
  handleTableChange,
  handleSearch,
  resetQuery,
  fetchNotificationList,
  handleView,
  handleMarkRead,
  handleBatchRead,
  handleMarkAllRead,
  handleClearRead,
  handleDelete,
  handleBatchDelete,
  handleAdd,
  handleSubmit
} = useNotificationManagement()
</script>

<style lang="scss" scoped>
@import '@/assets/styles/views/common.scss';
</style> 